<template>
  <div>
    <component
      v-for="(comp, id) in curComp"
      :key="id"
      :is="comp.comp.getComponentName()"
      :instance="comp.comp"
    ></component>

    <button>set</button>
  </div>
</template>
<script setup lang="ts">
import { ref, getCurrentInstance, watch, nextTick } from "vue";
import { useRoute } from "vue-router";
import { register } from "../register";
import type { KeyAndVal } from "../types/utils";
import type { VuePage } from "../vuePage";
import type { RenderParams } from "../types";
const curComp = ref<RenderParams>([]);
const curPage = ref<VuePage>();
const route = useRoute();
console.log(route.path, "path");

const setData = (data: KeyAndVal) => {
  const flag = ref("");
  curPage.value?.getComponents().forEach((comp) => {
    flag.value = data[comp.comp.getField()];
    if (flag.value) {
      comp.comp.setData(flag.value);
    }
  });
};

watch(
  () => route.path,
  (newVal) => {
    watchRouteChange(newVal);
  }
);

const watchRouteChange = (path: string) => {
  curPage.value = register.findPage(path);
  nextTick(() => {
    curComp.value = curPage.value!.getComponents();
  });
};
</script>
<style lang="scss" scoped></style>
